<template>
  <div>
    <div class="userCard">
      <div class="background"></div>
      <div class="info">
        <!-- 如果avatar被赋值则显示avatar如果没有就显示默认 -->
        <img
          :src="
            avatar ? avatar : 'http://liufusong.top:8080/img/profile/avatar.png'
          "
          alt=""
        />
        <!-- 如果没有uname则游客 -->
        <div class="uname">{{ uname ? uname : "游客" }}</div>
        <!-- 使用uname来判断是不是登录 -->
        <button class="login" v-if="token" @click="logout">登出</button>
        <button class="login out" v-if="!token" @click="$router.push('/login')">登入</button>
        <div class="setting" v-if="token">
          编辑个人资料<van-icon name="play" />
        </div>
      </div>
    </div>
    <van-grid :column-num="3" :border="false">
      <van-grid-item icon="star-o" to="/star" text="我的收藏" />
      <van-grid-item icon="wap-home-o" to="/rent" text="我的出租" />
      <van-grid-item icon="underway-o" text="看房记录" />
      <van-grid-item icon="idcard" text="成为房主" />
      <van-grid-item icon="contact" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>
    <div class="image">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { getToken, delCity } from '@/utils/storage'
import { getUserInfo, logout } from '@/api/user'
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  data () {
    return {
      avatar: '',
      uname: '',
      token: false
    }
  },
  async created () {
    if (getToken()) {
      // let forbidClick = true
      // this.$toast.loading({
      //   message: '获取数据中...',
      //   forbidClick
      // })
      this.token = true
      const { body } = await getUserInfo()
      this.avatar = `http://liufusong.top:8080${body.avatar}`
      this.uname = body.nickname
      // forbidClick = false
    }
  },
  methods: {
    logout () {
      Dialog.confirm({
        confirmButtonText: '退出',
        title: '提示',
        message: '是否退出登录'
      }).then(() => {
        logout()
        delCity()
        this.avatar = ''
        this.uname = ''
        this.token = false
      }).catch(() => {
        // 放着不给报错哼唧
      })
    }
  }
}
</script>

<style lang="less" scoped>
.userCard {
  position: relative;
  .background {
    background-image: url(http://liufusong.top:8080/img/profile/bg.png);
    background-size: 400px auto;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 300px;
  }
  .info {
    position: relative;
    z-index: 1;
    width: 320px;
    // height: 180px;
    margin: -150px auto 0 auto;
    box-shadow: 0 0 10px 3px #ddd;
    display: block;
    background: #fff;
    text-align: center;
    img {
      margin-top: -30px;
      height: 60px;
      width: 60px;
      border: 5px solid #f5f5f5;
      border-radius: 100px;
    }
    .uname {
      font-size: 13px;
      margin-top: 13px;
    }
    .login {
      margin: 8px 0 20px 0;
      padding: 2px 15px;
      border-radius: 15px;
      font-size: 13px;
      background: @blue;
      border: none;
      color: #fff;
    }
    .login.out {
      margin-top: 20px;
      padding: 5px 20px;
    }
    .setting {
      color: #999;
      font-size: 13px;
      padding-bottom: 40px;
    }
  }
}
.image {
  padding: 15px;
  margin-bottom: 55px;
  img {
    width: 100%;
  }
}
</style>
